<template>
  <div id="app" class="main">
    <div class="layout">
      <Layout>
        <Header class="heard">
          <Badge text="低代码" type="primary">
            <span class="app-name">page-cube</span>
          </Badge>
          <div class="icon-card">
            <Tooltip content="设置" placement="top-start">
              <Icon type="ios-settings" size="30" @click="setting.open = true" />
            </Tooltip>
            <Tooltip content="分享" placement="top-start">
              <Icon type="ios-share-alt" size="30" @click="share.open = true" />
            </Tooltip>
          </div>
        </Header>
        <Layout class="body-card">
          <Content>
            <Row type="flex" justify="center" align="middle" class="content">
              <!-- 【1】左侧组件区 -->
              <Col class="components left" :span="screenWidth.components">
                <componentList ref="components" />
              </Col>
              <!-- 【2】中间视图区域 -->
              <Col class="preview center" :span="screenWidth.preview">
                <preview ref="preview" />
              </Col>

              <!-- 【3】右侧属性和组件树面板 -->
              <Col class="attributes right" :span="screenWidth.attr">
                <div class="right-herder">
                  <Select :prefix="panel ? 'ios-list-box' : 'ios-book'" v-model="panel" class="select-herder">
                    <Option v-for="(item, i) in rightTypeList" :value="item.value" :key="i">
                      {{ item.label }}
                    </Option>
                  </Select>
                  <span class="right-component-name">
                    <span class="parent-name" v-if="parentComponent" @click="switchComponent">
                      {{ parentComponent.info.name }}
                    </span>

                    <span v-if="current.info">
                      {{ parentComponent ? ' - ' + current.info.name : current.info.name }}-
                      <span style="color: red">{{ current.info.id }}</span>
                    </span>
                  </span>
                </div>

                <!-- 属性面板 -->
                <attributes v-if="panel === 0" class="attributes-content" />
                <!-- 组件树面板 -->
                <!-- 传过来的只能是没有parentId的组件，因为有parentId表示是子组件，子组件需要放在父组件中显示，而不是单独显示 -->
                <component-tree
                  v-if="panel === 1"
                  class="component-tree"
                  :components="$store.state.components.filter((c) => !c.parentId)"
                />
                <exampleComponent v-if="panel === 2" class="attributes-content" />
                <!-- <div class="attributes-bottom" v-if="current.info">
                  <mu-flat-button label="UI文档" @click="openUiDocument" />
                  <mu-flat-button label="操作" @click="oprate" />
                </div> -->
              </Col>
            </Row>
          </Content>
        </Layout>
        <!-- <Footer>Footer</Footer> -->
      </Layout>
    </div>
    <!-- 导航栏 -->

    <mu-dialog :open="setting.open" @close="setting.open = false" title="设置" scrollable>
      <br />
      <mu-checkbox label="选中边框效果" v-model="setting.selectEffect" @change="setSelectEffect" />
      <br />
      <mu-flat-button primary label="关闭" @click="setting.open = false" slot="actions" />
    </mu-dialog>
    <mu-dialog :open="share.open" @close="share.open = false" title="分享当前布局" scrollable>
      <br />
      <mu-flat-button label="点击生成" @click="createShare" v-if="!share.url" />
      <br />
      <mu-text-field v-model="share.url" type="url" :disabled="true" hintText="分享地址" label="分享地址" fullWidth />
      <mu-text-field
        v-model="share.experience"
        type="url"
        :disabled="true"
        label="体验地址"
        hintText="体验地址"
        fullWidth
      />
      <br />
      <mu-flat-button primary label="关闭" @click="share.open = false" slot="actions" />
    </mu-dialog>
  </div>
</template>
<script>
import attributes from '@/components/attributes/index'
import componentList from './componentList'
import preview from './preview'
import componentTree from './componentTree.vue'
import exampleComponent from '@/components/rightCard/exampleComponent.vue'
export default {
  name: 'app',
  components: {
    componentList,
    preview,
    attributes,
    componentTree,
    exampleComponent, //示例组件面板
  },
  data() {
    return {
      setting: {
        open: false,
        selectEffect: true,
      },
      share: {
        open: false,
        url: '',
        experience: '',
      },
      panel: 0,

      rightTypeList: [
        {
          value: 0,
          label: '属性',
        },
        {
          value: 1,
          label: '组件树',
        },
        {
          value: 2,
          label: '组件示例',
        },
      ],
      openTree: false,
    }
  },

  computed: {
    current: {
      //预览视图中选中的组件
      get() {
        return this.$store.state.currentComponent
      },
    },
    screenWidth: {
      //三栏的宽度设置
      get() {
        return this.$store.state.screenWidth[0]
      },
    },
    parentComponent: {
      get() {
        let component
        if (this.current.parentId)
          component = this.$store.state.components.find((c) => c.info.id === this.current.parentId)
        else component = null
        return component
      },
    },
    components: {
      get() {
        return this.$store.state.components
      },
    },
  },
  watch: {
    components: {
      deep: true,
      handler(val, oldVal) {
        //布局修改后将分享的url设为空
        this.share.url = ''
        this.share.experience = ''
      },
    },
  },
  mounted() {
    this.$EventBus.$on('getExampleComponent', (data) => {
      this.panel = 2
    })
    this.setSelectEffect(this.setting.selectEffect)
  },
  methods: {
    switchComponent() {
      let el = document.getElementById(this.parentComponent.info.id)
      el.click()
    },
    // 右键操作
    oprate(e) {
      // let components = await this.$store.dispatch('delComponent', this.current.info.id)
      // this.$refs.preview.fresh()
      this.$refs.preview.rightClick(e)
    },
    openUiDocument() {
      switch (this.current.info.ui) {
        case 'Muse-UI':
          return window.open('http://www.muse-ui.org/#/' + this.current.info.name.replace(' ', ''))
        case 'Mint-UI':
          return window.open('https://mint-ui.github.io/docs/#/zh-cn/' + this.current.info.name.replace(' ', '-'))
        case 'iview-UI':
          return window.open('https://www.iviewui.com/components/' + this.current.info.name)
        default:
          return this.$toast('无文档页')
      }
    },
    setSelectEffect(val) {
      let head = document.head
      let style = document.getElementById('page-cube-style')
      if (!style) {
        style = document.createElement('style')
        style.id = 'page-cube-style'
        style.type = 'text/css'
        head.appendChild(style)
      }

      let cssText
      if (val) {
        cssText = `[data-component-active="true"] {
                              box-shadow: inset 0px 0px 0px 1px red!important;
                          }
                          [data-component-active]:hover {
                              box-shadow: inset 0px 0px 0px 1px red!important;
                          }
                          [data-component-active]:focus {
                              box-shadow: inset 0px 0px 0px 1px red!important;
                          }`
      } else {
        cssText = `[data-component-active="true"] {
                              box-shadow: none;
                              outline:none;
                          }
                          [data-component-active]:hover {
                              box-shadow: none;
                          }
                          [data-component-active]:focus {
                              box-shadow: none;
                          }`
      }
      let textNode = document.createTextNode(cssText)
      style.innerHTML = ''
      style.appendChild(textNode)
    },
    createShare() {
      let share = new this.$lean.Object('Share')
      share.set('store', this.$store.state)
      share.save().then((res) => {
        this.share.url = location.origin + location.pathname + '#/share/' + res.id
        this.share.experience = location.origin + location.pathname + '#/preview/pc/' + res.id
      })
    },
  },
}
</script>
<style lang="less" scoped>
/deep/ .mu-appbar {
  background-color: #666;
}
@import '~muse-ui/src/styles/colors.less';
@previewBG: @deepPurple50;
* {
  -webkit-user-select: none;
}

::-webkit-scrollbar {
  display: none;
}

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}

.title {
  font-family: Consolas, Liberation Mono, Menlo, Courier, monospace;
  .description {
    vertical-align: super;
  }
}

.main-content > div {
  transition: all 0.5s;
}

.client-height {
  height: 100vh;
  overflow-y: scroll;
}

.attributes {
  .client-height;
  // background-color: #ddd;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  justify-item: center;
  .header {
    white-space: nowrap;
  }
  .select-field {
    width: 70px;
    vertical-align: top;
    text-align: center;
  }
}

.attributes-content {
  flex: 1;
}

.component-tree {
  flex: 1;
}

.attributes-bottom {
  position: relative;
  text-align: center;
  // color: @grey500;
}

.preview {
  .client-height;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.117647), 0 1px 4px rgba(0, 0, 0, 0.117647);
  z-index: 1;
}

.components {
  .client-height;
  background-color: #ddd;
  overflow-y: scroll;
}

.parent-component {
  cursor: pointer;
}
.main {
  // 头部-----------------------
  /deep/.ivu-layout-header {
    background: #515a6e;
  }
  .heard {
    position: fixed;
    width: 100%;
    z-index: 100;

    color: #fff;
    /deep/.ivu-badge-count {
      position: relative;
    }
    .app-name {
      font-size: 20px;
      font-family: 'Hiragino Sans GB';
    }
    .icon-card {
      text-align: right;
    }
    .icon-card {
      position: absolute;
      right: 20px;
      top: 0;
      .ivu-icon:hover {
        cursor: pointer;
      }
    }
  }
  //核心区---------
  .body-card {
    margin-top: 60px;
  }
  // 左侧--------
  .left {
    height: calc(100vh -100px);
    overflow-y: scroll;
  }
  // 中间-------------
  .center {
    height: calc(100vh -100px);
    overflow-y: scroll;
  }
  // 右侧------------------------
  /deep/.ivu-layout-sider {
    background: #fff;
  }
  .right {
    height: calc(100vh -100px);
    overflow-y: scroll;
    .right-herder {
      background: #fff;
      border-bottom: 1px solid #ddd;
      margin-top: 10px;
      margin-bottom: 10px;
      /deep/.ivu-select-selection {
        background-color: #2d8cf0;
      }
      /deep/.ivu-select {
        color: #fff;
      }
      /deep/.ivu-icon {
        color: #fff;
      }
      .select-herder {
        width: 120px;
        padding-left: 5px;
      }
      .right-component-name {
        border-left: 1px solid #ddd;
        padding-left: 5px;
        .parent-name {
          font-weight: bold;
        }
      }
    }
  }
}
</style>
